<template>
    <el-card class="content-today-poetry">
        <div class="content-today-header">
            <img class="today-left" :src="today_left">
            <img class="today-center" :src="today_support">
            <img class="today-right" :src="today_right">
        </div>

        <div class="content-today-paragraphs">
            <span class="paragraphs-title">{{ content.title }} </span>
            <span class="paragraphs-author">{{ content.author }} </span>
            <span class="paragraphs-line" v-for="sp in content.poetryList">{{ sp }}</span>
        </div>
    </el-card>
</template>

<script>
import today_support from "@/assets/images/icon/today_support.png"
import today_left from "@/assets/images/icon/left.png"
import today_right from "@/assets/images/icon/right.png"

export default {
    name: "TodayPoetryComponent",
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {
            today_support: today_support,
            today_left: today_left,
            today_right: today_right,
            content: {}
        }
    },
    mounted() {
        this.content = this.item;
    },
    methods: {}
}
</script>

<style lang="scss" scoped>

.content-today-poetry {
    width: 780px;
    height: auto;
    margin: 20px auto 10px;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px;

    .content-today-header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    img.today-center {
        width: 120px;
        height: 36px;
        margin: 0 10px;
    }

    img.today-left, img.today-right {
        width: 69px;
        height: 18px;
    }

    .content-today-paragraphs {
        padding: 10px;
        display: flex;
        flex-direction: column;

        span {
            padding: 10px 0;
        }

        span.paragraphs-title {
            font-size: 18px;
        }

        span.paragraphs-author{
            font-size: 14px;
        }

        span.paragraphs-line {
            font-size: 16px;
        }
    }

}

</style>
